* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}
.float_left {
  float: left;
}
header,
footer {
  display: block;
  width: 100%;
  height: 12%;
  background: #CCC;
}
section {
  width: 100%;
  height: 76%;
}
.show,
.form {
  display: inline-block;
  float: left;
  width: 50%;
  height: 100%;
}
.form form {
  margin: 10%;
  padding: 2em;
  width: 50%;
  height: 60%;
  border-radius: 0.33333333em;
  box-shadow: 10px 10px 10px rgba(111, 111, 111, 0.1);
  text-align: center;
  background: rgba(222, 222, 111, 0.5);
}
.form form input {
  margin: 0 0 3% 0;
  padding: 3%;
  width: 94%;
  height: 13%;
  border: none;
  border-radius: 5px;
  font-size: 1.2em;
  background: #fafafa;
}
.show {
  position: relative;
}
.show h1 {
  position: absolute;
  left: 20%;
  top: 22%;
  color: #666666;
  -webkit-animation-name: move-h1;
  -webkit-animation-duration: 950ms;
  animation-name: move-h1;
  animation-duration: 950ms;
}
.show .show-content {
  position: absolute;
  left: 30%;
  top: 42%;
  width: 50%;
  color: #666666;
  font-size: 1.2em;
  -webkit-animation-name: move-content;
  -webkit-animation-duration: 950ms;
  animation-name: move-content;
  animation-duration: 950ms;
}
header {
  position: relative;
}
header h1 {
  position: absolute;
  left: 10%;
  bottom: 10%;
}
@-webkit-keyframes move-content {
  0% {
    position: absolute;
    left: 20%;
    top: 42%;
  }
  100% {
    position: absolute;
    left: 30%;
    top: 42%;
  }
}
@keyframes move-content {
  0% {
    position: absolute;
    left: 20%;
    top: 42%;
  }
  100% {
    position: absolute;
    left: 30%;
    top: 42%;
  }
}
@-webkit-keyframes move-h1 {
  0% {
    position: absolute;
    left: 40%;
    top: 22%;
  }
  100% {
    position: absolute;
    left: 20%;
    top: 22%;
  }
}
@keyframes move-h1 {
  0% {
    position: absolute;
    left: 40%;
    top: 22%;
  }
  100% {
    position: absolute;
    left: 20%;
    top: 22%;
  }
}
